[Android] MPAndroidChart で簡単チャート表示

はじめに

Android のアプリを開発していると円グラフや棒グラフなどのチャートを表示したい時ありますよね。今回はそんな時に使える便利なライブラリ、MPAndroidChartをご紹介します。

サンプルアプリのソースコードは GitHub で公開しています。お急ぎの方はこちらを参照してください。

• suwa-yuki/AndroidPieChartSample

MPAndroidChart とは

PhilJay氏によるチャート表示ライブラリです。Apache License 2.0 で公開されています。以前弊社のブログで iOS アプリでチャートを表示するためのライブラリ「Charts」をご紹介しましたが、MPAndroidChart はこちらの元となっているライブラリです。

チャートの例

デモアプリが Google Play Store で公開されていますので、手元ですぐに動作確認したい場合はダウンロードしてみてください。

例えば以下のようなチャートを表示することができます。

折れ線グラフ

棒グラフ

円グラフ

ローソク足チャート

レーダーチャート

他にも積み上げ棒グラフやバブルチャートなども表示することができます。 どんなチャートが表示できるかはデモ用ソースコードも公開されていますのでそちらをご覧ください。

導入方法

Gradle を使用すれば簡単に導入できます。build.gradle の dependencies に com.github.PhilJay:MPAndroidChart:v2.2.5 を記載して Sync するだけです ^*1。

allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}

dependencies {
    compile 'com.github.PhilJay:MPAndroidChart:v2.2.5'
}

円グラフを表示してみた

デモ用ソースコードを参考に円グラフを表示してみました。

PieChart を配置

Android プロジェクトを新規に作成し、レイアウト XML に PieChart を配置します ^*2。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.github.mikephil.charting.charts.PieChart
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:margin="20dp" />

</RelativeLayout>

円グラフのセットアップ

以下のようなメソッドを作ってみました。

private void setupPieChartView() {
    mPieChart.setUsePercentValues(true);
    mPieChart.setDescription("チャートの説明");

    Legend legend = mPieChart.getLegend();
    legend.setPosition(Legend.LegendPosition.BELOW_CHART_LEFT);

    // 円グラフに表示するデータ
    List<Float> values = Arrays.asList(40f, 30f, 20f, 10f);
    List<Entry> entries = new ArrayList<>();
    for (int i = 0; i < 4; i++) {
        entries.add(new Entry(values.get(i), i));
    }

    PieDataSet dataSet = new PieDataSet(entries, "チャートのラベル");
    dataSet.setColors(ColorTemplate.COLORFUL_COLORS);
    dataSet.setDrawValues(true);

    List<String> labels = Arrays.asList("A", "B", "C", "D");
    PieData pieData = new PieData(labels, dataSet);
    pieData.setValueFormatter(new PercentFormatter());
    pieData.setValueTextSize(12f);
    pieData.setValueTextColor(Color.WHITE);

    mPieChart.setData(pieData);
}

PieDataSet#setColors で円グラフの要素の色を指定しています。今回はテンプレートとして用意されている色の1つ、 ColorTemplate.COLORFUL_COLORS を使用しています。

実行すると、以下のような円グラフが表示されました。

ソースコードは GitHub で公開しています。ぜひ参考にしてください。

• suwa-yuki/AndroidPieChartSample

まとめ

対応しているチャートの種類も多く、オプションも豊富なため、結構活用シーンがあるのではないでしょうか。こういうライブラリが公開されているのは非常にありがたいですね。

脚注